<template>
  <div class="thank-you">
    <div class="top-logo">
      <img src="/images/logo.png" alt="Fantasi" title="Fantasi" />
    </div>
    <div class="logo-light">
      <img src="@/assets/images/logo-light2.png" alt="Fantasi" title="Fantasi" />
    </div>
    <div class="content d-flex flex-column justify-center align-center gap-col-24">
      <div class="title font-weight-500 text-center">{{ $t('signup.welcome') }}</div>
      <div v-if="aff" class="creator">
        <div class="info d-flex flex-column justify-center align-center">
          <div class="avatar">
            <Avatar
              :src="creator?.avatar"
              :radius="40"
              :vip="creator.is_vip"
              click-to-full
              :vipTier="creator.tier"
            ></Avatar>
          </div>
          <div class="nickname">{{ creator?.nickname }}</div>
          <div class="username">@{{ creator?.username }}</div>

          <BlockButton class="btn" label="common.more" intl @click="toPromoteCreator"></BlockButton>
        </div>
      </div>

      <div v-else class="links d-flex flex-column gap-col-8">
        <Link class="font-weight-500" href="/home" @click="toHome">{{ $t('signup.toHome') }}</Link>
        <Link class="font-weight-500" href="/creators" @click="toPopularCreators">{{ $t('signup.toSearch') }}</Link>
      </div>
      <div class="contact d-flex flex-column gap-col-16">
        <div class="font-weight-500 text-center">{{ $t('signup.contact') }}</div>
        <div class="socials d-flex flex-row justify-center gap-row-16">
          <a href="https://www.tiktok.com/@fantasi.one" target="_blank"><Icon size="30" name="tiktokRounded"></Icon></a>
          <a href="https://x.com/FantasiOne" target="_blank"><Icon size="30" name="twitterRounded"></Icon></a>
          <!-- prettier-ignore -->
          <a href="https://www.instagram.com/fantasi.one" target="_blank"><Icon size="30" name="instagramRounded"></Icon></a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useCreatorStore } from '@/store/creator'
import { useNavStore } from '@/store/nav'
import BlockButton from '@/components/button/BlockButton.vue'
import Link from '@/components/common/Link.vue'
import Avatar from '@/components/multimedia/Avatar.vue'

const { toHome } = useNavStore()

const route = useRoute()
const aff = ref(Number(route.query.aff) || null)
const ch = ref(route.query.ch || null)

const { getCreator } = useCreatorStore()
const creator = ref(null)
watchEffect(async () => (aff.value ? (creator.value = await getCreator(Number(aff.value))) : void 0))

const router = useRouter()
const toPromoteCreator = () => router.push({ name: 'promote-creator', query: { aff: aff.value, ch: ch.value } })
const toPopularCreators = () => router.push({ name: 'popular-creators' })
</script>

<style lang="scss" scoped>
.thank-you {
  width: inherit;
  height: inherit;
  position: relative;
  background: rgba(24, 25, 37, 1);

  .top-logo {
    height: 2.4375rem;
    padding: 0.625rem 1rem;
    img {
      height: 1.25rem;
    }
  }

  .logo-light {
    width: 628px;
    max-width: 100%;
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);

    img {
      width: 100%;
    }
  }

  .content {
    position: absolute;
    width: inherit;
    height: inherit;
    top: 0;

    .title {
      font-size: 1.25rem;
    }

    .links {
      font-size: 1rem;
      color: #ffe57a;
      > * {
        text-shadow: 0px 0px 2px #fcff78;
      }
    }

    .contact {
      font-size: 0.875rem;
    }
  }
}

@media (min-width: 768px) {
  .thank-you {
    .top-logo {
      height: 4.875rem;
      padding: 1rem 2rem;
    }
    .content {
      .title {
        font-size: 3rem;
      }
      .links {
        font-size: 1.5rem;
      }
      .contact {
        font-size: 1.25rem;
      }
    }
  }
}

.creator {
  position: relative;
  margin-top: 2.75rem;

  border: solid 0.125rem transparent;
  border-radius: 0.625rem;
  background: linear-gradient(
    180deg,
    rgb(var(--v-theme-primary-gradient-from)) 0%,
    rgb(var(--v-theme-primary-gradient-to)) 100%
  );
  box-shadow: 0 0 10px rgba(255, 15, 0, 0.68);

  .btn {
    padding: 0rem 3rem;
    margin-top: 2.25rem;
  }

  .info {
    padding: 3rem 1.5rem 1.875rem 1.5rem;
    background: rgba(24, 25, 37, 1);
    border-radius: 0.625rem;
  }

  .avatar {
    position: absolute;
    top: -3.25rem;

    display: flex;
    justify-content: center;
    align-items: center;

    border: solid 0.125rem transparent;
    border-radius: 100%;
    background: linear-gradient(
      180deg,
      rgb(var(--v-theme-primary-gradient-from)) 0%,
      rgb(var(--v-theme-primary-gradient-to)) 100%
    );
    box-shadow: 0 0 10px rgba(255, 15, 0, 0.68);
  }

  .nickname {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2.06rem;
    text-align: center;
  }
  .username {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.75rem;
    text-align: center;
    color: rgb(var(--v-theme-subtitle-x));
  }
}
</style>
